@charset "utf-8";
.date-picker-input{ display: inline-block; position: relative;
  i{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; cursor: pointer }
  .icon-close{ display: none }
  &.date-picker-clear{
    //清空按钮
    &:hover{
      .icon-close{ display: block; }
      .icon-date{ display: none }
    }
  }
}
.date-picker{ position: absolute; background: #fff; border: 1px solid #d9d9d9; box-shadow: 0 1px 6px #ddd; z-index: 999; padding: 5px; overflow: hidden; animation: datePickerIn .3s; transform-origin: center top;
  .calendar{ float: left; display: block; user-select: none; width: 200px;
    &:nth-child(2){ margin-left: 10px; }
  }
  .calendar-head{ @include height(34px); text-align: center; position: relative;
    a{ cursor: pointer; position: absolute; padding: 0 5px; font-weight: 700; font-size: 12px; }
    .calendar-prev-year{ left: 5px; }
    .calendar-prev-month{ left: 25px; }
    .calendar-year-select, .calendar-year-month{ position: relative; padding: 0; }
    .calendar-next-year{ right: 5px; }
    .calendar-next-month{ right: 25px; }
  }
  .calendar-body{ text-align: center; position: relative;
    .calendar-days{
      a{ float: left; width: 14.28%; height: 14.28%; display: block; font-size: 12px; color: #333; box-sizing: border-box; cursor: pointer; position: relative;
        &:hover{ background: #eaf8fe; }
        span{ position: absolute; font-size: 10px; right: -3px; top: -6px;color: #2d8cf0;z-index: 2 }
      }
      /*非当前月*/
      .calendar-date-out{ color: #999; }
      .calendar-date-disabled{ color: #ccc; cursor: not-allowed;
        &:hover{ background: none }
      }
      /*当前选中*/
      .calendar-date-select{ color: #f60; }
      /*今天的*/
      .calendar-date-today{ text-decoration: underline }
    }
    .calendar-week{
      a{ cursor: default;
        &:hover{ background: none; }
      }
    }
    .calendar-months, .calendar-year{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; overflow: hidden;z-index: 10;
      a{ float: left; width: 33.33%; @include height(44px); display: block; color: #333; cursor: pointer;
        &:hover{ background: #eaf8fe; }
        &.calendar-date-disabled{ background: #ccc; cursor: not-allowed }
        &.calendar-date-old{ background: #eaf8fe; }
        &.calendar-date-select{ background: #1284e7; color: #fff; font-weight: 700; cursor: pointer }
      }
    }
    .calendar-time{ @include height(22px); position: relative; text-align: left;
      .calendar-time-input{ border: 1px solid #d9d9d9; width: 80px; }
      input{ width: 20px; text-align: center; border: 0; font-size: 12px; }
      .btn-time{ right: 10px; top: 0; position: absolute; cursor: pointer; }
    }
  }
  &.date-picker-range{
    //双日历
    .calendar-year, .calendar-months{ width: 202% !important; z-index: 5 }
    .btn-time{ clear: both; text-align: right; margin-right: 10px; cursor: pointer;
      &:hover{ color: #f60; }
    }
  }
}
@keyframes datePickerIn{
  0%{ opacity: 0; transform: scaleY(0); }
  100%{ opacity: 1; transform: scaleY(1); }
}
.date-picker-leave-active{ animation: leave .3s }
@keyframes leave{
  0%{ opacity: 1; transform: scaleY(1); }
  100%{ opacity: 0; transform: scaleY(0); }
}